<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Smart Gesture DEMO</title>
</head>
<style>
  .configure,
  .recognize {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 15px;
    margin-top: 10px;
  }
  
  .add,
  .result {
    display: inline-block;
    vertical-align: top;
  }
  
  .result {
    margin-left: 100px;
    padding-left: 100px;
    border-left: 1px dashed #ccc;
  }
  
  .config-title {
    display: inline-block;
    width: 200px;
  }
  
  .option-tip {
    margin-left: 10px;
    font-size: 12px;
    vertical-align: middle;
  }
  
  .stage {
    height: 400px;
    background: #ddd;
    position: relative;
    margin: 15px 0;
  }
  
  .stage:before {
    content: '绘制区域';
    color: #eeeeee;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<body>
  <div class="configure">
    <h2>配置 configuration</h2>
    <p><input type="checkbox"
      id="path"
      onchange="renewGesture()"
      checked><label for="path">开启鼠标轨迹</label><span class="option-tip">enablePath</span></p>
    <p><span class="config-title">触发手势识别时间(ms)</span><input id="delay"
      type="number"
      value="100"
      onchange="renewGesture()"><span class="option-tip">timeDelay</span></p>
    <p><span class="config-title">鼠标轨迹颜色</span><input id="color"
      type="text"
      value="#666"
      onchange="renewGesture()"><span class="option-tip">lineColor</span></p>
    <p><span class="config-title">鼠标轨迹宽度</span><input id="width" type="text" value="4" onchange="renewGesture()"><span
      class="option-tip">lineWidth</span></p>
    <p><span class="config-title">触发手势识别鼠标按键</span><input id="key"
      type="text"
      value="right"
      onchange="renewGesture()"><span class="option-tip">triggerMouseKey</span></p>
    <p><span class="config-title">开启手势时背景色</span><input id="active-color"
      type="text"
      value="rgba(0, 0, 0, .05)"
      onchange="renewGesture()"><span class="option-tip">triggerMouseKey</span></p>
  </div>
  <div class="recognize">
    <div class="add">
      <h2>手势区域</h2>
      <label>添加新手势 </label>
      <input id="gestureName" placeholder="手势名称">
      <button id="btn">ADD</button>
    </div>
    <div class="result">
      <h2>识别结果</h2>
      <p>Gesture result: <span style="font-weight: bold; color: #2b5;" id="result"></span></p>
      <p>Swipe directions result: <span style="font-weight: bold; color: #2b5;" id="result0"></span></p>
    </div>
    <div id="test" class="stage">
    </div>
  </div>
  <script src="dist/min/smart-gesture.min.js"></script>
  <script>
    let lastPoints = [];
    
    var options = {
      el: document.getElementById('test'),
      enablePath: document.getElementById('path').checked,
      timeDelay: document.getElementById('delay').value,
      lineColor: document.getElementById('color').value,
      lineWidth: document.getElementById('width').value,
      triggerMouseKey: document.getElementById('key').value,
      activeColor: document.getElementById('active-color').value,
      onSwipe: (list) => {
        document.getElementById('result0').innerHTML = list.join('');
        console.log(list);
      },
      onGesture: (res, points) => {
        console.log(res);
        document.getElementById('result').innerHTML = res.score > 2 ? res.name : '未识别';
        lastPoints = points;
      }
    };
    
    var canvas = new smartGesture(options);
    
    document.getElementById('btn').addEventListener('click', () => {
      canvas.addGesture({
        name: document.getElementById('gestureName').value,
        points: lastPoints
      });
      document.getElementById('gestureName').value = '';
    });
    
    // renew smartGesture
    function renewGesture() {
      var options = {
        enablePath: document.getElementById('path').checked,
        timeDelay: document.getElementById('delay').value,
        lineColor: document.getElementById('color').value,
        lineWidth: document.getElementById('width').value,
        triggerMouseKey: document.getElementById('key').value,
        activeColor: document.getElementById('active-color').value,
      };
      canvas.refresh(options);
    }
  
  </script>
</body>
</html>
